<template>
	<view>
		<!-- 天气预报模块 -->
		<view class="weather-container">
			<view class="weather-header">今日 & 明日天气预报</view>

			<!-- 今天天气 -->
			<view class="weather-card today-weather" v-if="todayWeather">
				<view class="weather-card-header">
					<view class="weather-date">
						<text class="date">{{ todayWeather.fullDate }}</text>
						<text class="weekday">{{ todayWeather.weekday }}</text>
					</view>
					<view class="weather-type">{{ todayWeather.type }}</view>
				</view>
				<view class="weather-card-content">
					<view class="temp-container">
						<view class="temp-item">
							<text class="temp-label">最高温</text>
							<text class="temp-value high-temp">{{ todayWeather.high }}℃</text>
						</view>
						<view class="temp-item">
							<text class="temp-label">最低温</text>
							<text class="temp-value low-temp">{{ todayWeather.low }}℃</text>
						</view>
					</view>

				</view>
			</view>

			<!-- 明天天气 -->
			<view class="weather-card tomorrow-weather" v-if="tomorrowWeather">
				<view class="weather-card-header">
					<view class="weather-date">
						<text class="date">{{ tomorrowWeather.fullDate }}</text>
						<text class="weekday">{{ tomorrowWeather.weekday }}</text>
					</view>
					<view class="weather-type">{{ tomorrowWeather.type }}</view>
				</view>
				<view class="weather-card-content">
					<view class="temp-container">
						<view class="temp-item">
							<text class="temp-label">最高温</text>
							<text class="temp-value high-temp">{{ tomorrowWeather.high }}℃</text>
						</view>
						<view class="temp-item">
							<text class="temp-label">最低温</text>
							<text class="temp-value low-temp">{{ tomorrowWeather.low }}℃</text>
						</view>
					</view>
				</view>
			</view>

			<view class="weather-loading" v-else-if="isLoading">加载中...</view>
			<view class="weather-error" v-else>获取天气失败，请稍后重试</view>
		</view>

		<!-- 新闻列表模块 -->
		<news-card v-for="(item, index) in newsList" :key="index" :title="item.title" :source="item.source"
			:tags="item.tags" :mode="item.mode" :comment="item.comment" :time="item.time" :images="item.images"
			:bg-color="item.bgcolor" />
	</view>
</template>

<script>
	import NewsCard from '../../../../components/cardViewText.vue';
	import data from '../../../../data/new.json'
	export default {
		components: {
			NewsCard
		},
		data() {
			return {
				// newsList: [
				//   {
				//     title: "14个月从100家开到1000家门店，蜜雪冰城为何买下这家精酿啤酒商",
				//     source: "置顶",
				//     tags: ["界面新闻"],
				//     comment: "56评",
				//     time: "2025.10.07",
				//     mode: 2,
				//     images: []
				//   },
				//   {
				//     title: "把握历史大势 共创美好未来（观沧海）",
				//     source: "人民日报",
				//     tags: [],
				//     comment: "1025评",
				//     time: "2025.10.25",
				//     mode: 1,
				//     images: []
				//   },
				//   {
				//     title: "黄金还能走多远？卖方高呼“第三浪启动”，230多份研报看多",
				//     source: "财联社",
				//     tags: ["今日金价", "商品分析"],
				//     comment: "4323评",
				//     time: "2025.10.08",
				//     mode: 2,
				//     images: []
				//   },
				//   {
				//     title: "加微信交友群，喜欢就聊，找喜欢的人",
				//     source: "我主良缘文化", 
				//     comment: "",
				//     time: "2025.10.08 09:50",
				//     mode: 3, 
				//     images: [ 
				//       "/static/guangao1.png",
				//       "/static/guangao2.png",
				//       "/static/guangao3.png"
				//     ],
				//     bgcolor: "#fee" 
				//   },
				//   {
				//     title: '"没有短板”的完美战鹰！歼-16V机独家探访',
				//     source: "红星新闻",
				//     tags: [],
				//     comment: "56评",
				//     time: "2025.10.07",
				//     mode: 1,
				//     images: []
				//   },
				//   {
				//     title: "多国学者共探巴克特里亚考古 携手推进丝绸之路文明研究新进程",
				//     source: "中国日报网",
				//     tags: [],
				//     comment: "56评",
				//     time: "2025.10.12",
				//     mode: 1,
				//     images: []
				//   },
				// ],
				newsList: null,
				todayWeather: null,
				tomorrowWeather: null,
				isLoading: false,
				weatherError: false
			};
		},
		onLoad() {
		 this.newsList = data.newsList;
		 console.log(""+ JSON.stringify(this.newsList));
		},
		mounted() {
			this.getWeatherForecast();
		},
		methods: {
			// 获取天气预报
			getWeatherForecast() {
				this.isLoading = true;
				const weatherUrl = "http://t.weather.sojson.com/api/weather/city/101230501";

				uni.request({
					url: weatherUrl,
					method: 'GET',
					success: (res) => {
						console.log("天气接口返回数据：", res);
						if (res.statusCode === 200 && res.data && res.data.data) {
							const weatherData = res.data.data;
							if (weatherData.forecast && weatherData.forecast.length >= 2) {
								// 处理今天天气
								this.todayWeather = this.processWeatherData(weatherData.forecast[0], 0);
								// 处理明天天气
								this.tomorrowWeather = this.processWeatherData(weatherData.forecast[1], 1);
							} else {
								this.weatherError = true;
								console.error("未获取到完整的天气预报数据");
							}
						} else {
							this.weatherError = true;
							console.error("天气接口返回数据格式异常");
						}
					},
					fail: (err) => {
						this.weatherError = true;
						console.error("获取天气预报失败：", err);
					},
					complete: () => {
						this.isLoading = false;
					}
				});
			},

			processWeatherData(weatherItem, dayOffset) {
				const year = new Date().getFullYear();
				let dateObj = null;

				const monthDayReg = /(\d{1,2})月(\d{1,2})日/;
				const monthDayMatch = weatherItem.date.match(monthDayReg);

				if (monthDayMatch) {
					const month = parseInt(monthDayMatch[1]);
					const day = parseInt(monthDayMatch[2]);
					dateObj = new Date(year, month - 1, day);
				} else {
					dateObj = new Date();
					dateObj.setDate(dateObj.getDate() + dayOffset);
				}
				if (isNaN(dateObj.getTime())) {
					dateObj = new Date();
					dateObj.setDate(dateObj.getDate() + dayOffset);
				}

				const formatDate = this.formatDateToYMD(dateObj);
				const weekday = this.getWeekdayFromDate(dateObj);

				return {
					...weatherItem,
					fullDate: formatDate,
					weekday: weekday,
					dateObj: dateObj
				};
			},

			formatDateToYMD(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}.${month}.${day}`;
			},

			getWeekdayFromDate(date) {
				const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				return weekDays[date.getDay()];
			}
		}
	};
</script>

<style scoped>
	.weather-container {
		padding: 15px;
		margin: 10px;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.weather-header {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #f5f5f5;
		text-align: center;
	}

	/* 天气卡片样式 */
	.weather-card {
		padding: 15px;
		border-radius: 8rpx;
		margin-bottom: 12px;
		background-color: #f8f9fa;
	}

	.today-weather {
		border-left: 4px solid #42b983;
		background-color: rgba(66, 185, 131, 0.05);
	}

	.tomorrow-weather {
		border-left: 4px solid #4299e1;
		background-color: rgba(66, 153, 225, 0.05);
	}

	.weather-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
		padding-bottom: 8px;
		border-bottom: 1px solid #eee;
	}

	.weather-date {
		display: flex;
		flex-direction: column;
	}

	.date {
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}

	.weekday {
		font-size: 12px;
		color: #666;
		margin-top: 2px;
	}

	.weather-type {
		font-size: 15px;
		font-weight: 500;
		color: #4299e1;
		padding: 4px 8px;
		background-color: rgba(66, 153, 225, 0.1);
		border-radius: 4px;
	}

	.today-weather .weather-type {
		color: #42b983;
		background-color: rgba(66, 185, 131, 0.1);
	}

	.weather-card-content {
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
	}

	.temp-container {
		flex: 1 1 140px;
		display: flex;
		gap: 15px;
	}

	.temp-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.temp-label {
		font-size: 12px;
		color: #999;
		margin-bottom: 4px;
	}

	.temp-value {
		font-size: 18px;
		font-weight: bold;
	}

	.high-temp {
		color: #e53e3e;
	}

	.low-temp {
		color: #4299e1;
	}

	.other-info {
		flex: 1 1 140px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
	}

	.info-item {
		font-size: 13px;
		color: #666;
		display: flex;
		align-items: center;
	}

	.info-item::before {
		content: "•";
		color: #999;
		margin-right: 6px;
		font-size: 14px;
	}

	.weather-loading,
	.weather-error {
		text-align: center;
		padding: 20px;
		color: #999;
		font-size: 14px;
	}

	.weather-error {
		color: #ff4d4f;
	}

	.container {
		padding: 10px;
	}

	.header {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.image {
		width: 100px;
		height: 100px;
		border-radius: 10rpx;
		object-fit: cover;
	}

	.weather-card:last-child {
		margin-bottom: 0;
	}
</style>